﻿@model LeadExpress.Models.ViewPages.UserManagementModel
           
@{
    ViewBag.Title = "Management";
    Layout = "~/Views/Shared/_Layout.Management.cshtml";
}


<h2 class="app">
	<strong>Welcome to Express</strong>
</h2>
<div class="title nomargin">
	<h3>View Users</h3>
</div>
<span class="paging">
    <span class="pageleft">                
        <span class="total" data-bind='text: PageText'></span>
        <span class="show ">Show <input type="text" class="text" id="pagesize" data-bind='value: PageSize, attr: {maxlength: 3}, event: { keypress: RunSomethingKey }' /> per page <span class="smallText" data-bind="text: PageSizeText"></span> </span>
    </span>
    <span class="pages">
        <span class="smallText" data-bind="text: PageCurrentText"></span>Page <input type="text" class="text" id="pagecurrent" data-bind='value: CurrentPageIndex, event: { keypress: RunSomethingKey }' /> of <span data-bind='text: MaxPageIndex' class="totalpages"></span>
        <a href="#" data-bind='click: PrevPage, css: {"btn btn-prev-arrow prev-active": CurrentPageIndex() > 1,  "btn btn-prev-arrow": CurrentPageIndex() <= 1}'>Prev </a>
  	    <a href="#" data-bind='click: NextPage, css: {"btn btn-next-arrow next-disabled": CurrentPageIndex() >= MaxPageIndex(),  "btn btn-next-arrow": CurrentPageIndex() < MaxPageIndex()}'>Next </a>
    </span>
</span>

<div id="gridLead" class="table table-leads">
    <div id="progressbar"></div>
    <div class="title">
        <div class="col1" data-bind='click: function(event) { SetOrder(event, "Name")}'>
            <span class="w" style="height:22px">
                <a href="#">Name</a>
                <div class="sort_wrapper" id="Name">  
                    <span class="grid_order ui_icon"></span>
                </div>                                        
            </span>                          
        </div>
		<div class="col1 col2" data-bind='click: function(event) { SetOrder(event, "Phone")}'>
            <span class="w" style="height:22px">
                <a href="#">Phone</a>
                <div class="sort_wrapper" id="Phone">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col3" data-bind='click: function(event) { SetOrder(event, "Email")}'>
            <span class="w" style="height:22px">
                <a href="#">Email</a>
                <div class="sort_wrapper" id="Email">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col4" data-bind='click: function(event) { SetOrder(event, "CreationDate")}'>
            <span class="w" style="height:22px">
                <a href="#">Creation Date</a>
                <div class="sort_wrapper" id="CreationDate">  
                    <span class="grid_order ui_icon desc"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col5" data-bind='click: function(event) { SetOrder(event, "Address")}'>
            <span class="w" style="height:22px">
                <a href="#">Address</a>
                <div class="sort_wrapper" id="Address">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col6" data-bind='click: function(event) { SetOrder(event, "Active")}'>
            <span class="w" style="height:22px">
                <a href="#">Status</a>
                <div class="sort_wrapper" id="Active">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col7"><span class="w" style="height:22px">Address</span></div>
		<div class="col1 col8" data-bind='click: function(event) { SetOrder(event, "City")}'>
            <span class="w" style="height:22px">
                <a href="#">City</a>
                <div class="sort_wrapper" id="City">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col9" data-bind='click: function(event) { SetOrder(event, "State")}'>
            <span class="w" style="height:22px">
                <a href="#">State</a>
                <div class="sort_wrapper" id="State">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col10" data-bind='click: function(event) { SetOrder(event, "ZipCode")}'>
            <span class="w" style="height:22px">
                <a href="#">Zip Code</a>
                <div class="sort_wrapper" id="ZipCode">  
                    <span class="grid_order ui_icon"></span>
                </div>              
            </span>
        </div>
		<div class="col1 col11"><span class="w" style="height:22px">Login Count</span></div>
		<div class="col1 col12 centeralign"><span class="w" style="height:22px">Delete</span></div>
    </div>
    <div class="linegroup" data-bind="foreach: Leads">
        <div class="line" data-bind='css: {"line" : Active=="", "line new": Active!=""}'>                        
			<div class="col1"><span class="w" style="min-height: 24px;"><a data-bind='text: Name, attr: {href: "/Management/EditUser/" + ID }'></a></span></div>
			<div class="col1 col2"><span class="w" style="min-height: 24px;"><a data-bind="text: Phone" class="button"></a></span></div>
			<div class="col1 col3"><span class="w" style="min-height: 24px;"><a data-bind='text: Email, attr: {href: "mailto:" + Email}'></a></span></div>
			<div class="col1 col4"><span class="w" style="min-height: 24px;" data-bind='text: CreationDate'></span></div>
			<div class="col1 col5"><span class="w" style="min-height: 24px;" data-bind='text: Address'></span></div>
			<div class="col1 col6"><span class="w" style="min-height: 24px;"><span class="green" data-bind='text: Active'></span></span></div>
			<div class="col1 col7"><span class="w" style="min-height: 24px;"><a href="#" data-bind='text: Address'></a></span></div>
			<div class="col1 col8"><span class="w" style="min-height: 24px;"><a data-bind='text: City'></a></span></div>
			<div class="col1 col9"><span class="w" style="min-height: 24px;" data-bind='text: State'></span></div>
			<div class="col1 col10"><span class="w" style="min-height: 24px;" data-bind='text: ZipCode'></span></div>
			<div class="col1 col11">
                <span class="w" style="min-height: 24px;" data-bind='text: NumLogin' ></span>                                
            </div>
			<div class="col1 col12 centeralign"><span class="w" style="min-height: 24px;"><a class="btn btn-x cfdelete" data-bind='attr: {href: "##" + ID, rel: Name}' >Delete</a></span></div>
        </div>
    </div>
</div>         
<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
</script>
<script src="/Scripts/viewModel/viewmodel.leadgrid.js" type="text/javascript"></script> 